<template>
  <div class="record">
    <div class="drawMessage">
      <img src="../../assets/images/msg.png" class="image" />
      <span class="title">温馨提示：请在公众号菜单栏获取【我的海报】并发送给粉丝关注本公众号，即可永久为您创造收益。</span>
    </div>
    <div class="head">
      <div class="partner">
        <div class="my-partner">
          <span class="partner-tip">粉丝总数：</span>
          <span class="partner-num">{{fansAllNum}}</span>
        </div>
        <div class="add">
          <div class="add-partner">
            <div class="title">今日新增粉丝(位)</div>
            <div class="num" v-if="todayNewFansNum == 0">{{todayNewFansNum}}</div>
            <div class="num" v-else>+{{todayNewFansNum}}</div>
          </div>
          <div class="add-income">
            <div class="title">昨日新增粉丝(位）</div>
            <div class="num" v-if="yesterdayNewFansNum == 0">{{yesterdayNewFansNum}}</div>
             <div class="num" v-else>+{{yesterdayNewFansNum}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list-banner">
      <div :class="active===1? 'banner banner-hover':'banner'" @click="toggle(1)">已关注：{{followDoneNum}}人<div class="line"></div></div>
      <div :class="active===2? 'banner banner-hover':'banner'" @click="toggle(2)">未关注：{{followNoneNum}}人<div class="line"></div></div>
    </div>

    <div class="list"
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
    >
      <div class="list-title">
        <div>微信昵称</div>
        <div>{{active === 1 ? '关注时间' : '加入时间'}}</div>
      </div>

      <div v-if="active === 1">
        <div class="items" v-for="item in recordList" key="index" index="index" item="item">
          <div class="item">{{item.nick}}</div>
          <div class="item">{{item.followTime}}</div>
        </div>
        <div class="no-more" v-if="isFetching || !isHaveData">
          {{isFetching ? '正在加载...' : ''}}
          {{!isHaveData? '暂无粉丝' : ''}}
        </div>
    </div>

    <div v-if="active === 2">
       <div class="items" v-for="item in recordList2" key="index" index="index" item="item">
          <div class="item">{{item.nick}}</div>
          <div class="item">{{item.followTime}}</div>
        </div>
        <div class="no-more" v-if="isFetching2 || !isHaveData2">
          {{isFetching2 ? '正在加载...' : ''}}
          {{!isHaveData2 ? '暂无粉丝' : ''}}
        </div>
      </div>
    </div>
    <div class="bottom" v-if="isBottom && active === 1">已经到底了～</div>
    <div class="bottom" v-if="isBottom2 && active === 2">已经到底了～</div>
  </div>
</template>

<script>
  import { axiosGet, axiosPost } from '../../assets/js/api'
  import Utils from '@/assets/js/utils'
  import { Indicator } from 'mint-ui'
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['mpOpenId'])
    },
    data () {
      return {
        todayNewFansNum: '',
        followDoneNum: '',
        followNoneNum: '',
        yesterdayNewFansNum: '',
        fansAllNum: '',

        isHaveData: true,
        isBottom: false,
        isFetching: false,
        offset: 0,
        recordList: [],

        isHaveData2: true,
        isBottom2: false,
        isFetching2: false,
        offset2: 0,
        recordList2: [],

        active: 1
      }
    },
    mounted () {
      this.fetchFans()
      this.fetchList()
      this.fetchList2()
    },
    watch: {
      "mpOpenId": function () {
        this.fetchFans()
        this.fetchList()
        this.fetchList2()
      }
    },
    methods: {
      loadMore() {
        this.active === 1 ? this.fetchList() : this.fetchList2()
      },
      fetchFans () {
        if (!this.mpOpenId) return;
        const self = this;
        const data = JSON.stringify({
          'mpOpenId': this.mpOpenId
        })
        Indicator.open('加载中...')
        axiosGet('/api/public/h5/weixin/fansStatistics?data=' +encodeURI(data))
          .then((response) => {
            Indicator.close()
            if (response.success) {
              self.yesterdayNewFansNum = response.data.yesterdayNewFansNum
              self.todayNewFansNum = response.data.todayNewFansNum
              self.followNoneNum = response.data.followNoneNum
              self.followDoneNum = response.data.followDoneNum
              self.fansAllNum = response.data.fansAllNum
              return
            }
            alert(error.msg || '系统错误，请重试！')
          }, (error) => {
            Indicator.close()
            alert(error.msg || '系统错误，请重试！')
          })
      },
      fetchList () {
        console.log('fetchList')
        if (!this.mpOpenId) return;
        const self = this
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId,
          "offset": this.offset,
          "followType": 1,
          "pageSize": 10
        })

        if (!this.isFetching && this.isHaveData && !this.isBottom) {
          this.isFetching = true
          Indicator.open('加载中...')
          axiosGet('/api/public/h5/weixin/myFans?data=' + encodeURI(data))
            .then((response) => {
              self.isFetching = false
              Indicator.close()
              if (response.success) {
                let items = response.data.fans
                items = items.map((item) => { // 格式化毫秒数据
                  item.followTime = Utils.formatDate(new Date(item.followTime), 'yyyy-MM-dd');
                  return item
                });
                self.recordList = [...this.recordList, ...items]
                self.offset += items.length
                if (!self.recordList.length) {
                  self.isHaveData = false
                }
                if (!items.length || items.length < 10) {
                  self.isBottom = true
                }
              }
            }, (error) => {
              Indicator.close()
              self.isFetching = false
            })
        }
      },
      fetchList2 () {
        console.log('fetchList2')
        if (!this.mpOpenId) return;
        const self = this
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId,
          "offset": this.offset2,
          "followType": 0,
          "pageSize": 10
        })

        if (!this.isFetching2 && this.isHaveData2 && !this.isBottom2) {
          this.isFetching2 = true
          Indicator.open('加载中...')
          axiosGet('/api/public/h5/weixin/myFans?data=' + encodeURI(data))
            .then((response) => {
              self.isFetching2 = false
              Indicator.close()
              if (response.success) {
                let items = response.data.fans
                items = items.map((item) => { // 格式化毫秒数据
                  item.followTime = Utils.formatDate(new Date(item.followTime), 'yyyy-MM-dd');
                  return item
                });
                self.recordList2 = [...this.recordList2, ...items]
                self.offset2 += items.length
                if (!self.recordList2.length) {
                  self.isHaveData2 = false
                }
                if (!items.length || items.length < 10) {
                  self.isBottom2 = true
                }
              }
            }, (error) => {
              Indicator.close()
              self.isFetching2 = false
            })
        }
      },
      toggle(index){
        this.active = index;
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .record {
    background-color: #f5f5f5;
    height: 100%;
    .no-more{
      color: #666;
      font-size: 0.3rem;
      text-align: center;
      padding: 0.2rem 0;
    }
    .bottom{
      color: #888;
      font-size: 0.26rem;
      text-align: center;
      padding: 0.2rem 0;
    }
    .drawMessage {
      background-color: #faf7e4;
      padding: 0.2rem 0.2rem 0.2rem 0.3rem;
      border-bottom: 0.5px solid #DADADA;
      .image {
        width: 0.4rem;
        height: 0.3rem;
        vertical-align: middle;
        position:relative;
        top: -0.05rem;
      }
      .title {
        padding-left: 0.1rem;
        font-size: 0.26rem;
        color: #f0955e;
        line-height: 0.4rem;
      }
    }
    .partner{
      background-color: white;
      .my-partner{
        padding: 0.3rem 0 0.3rem 0.32rem;
        border-bottom: 0.5px solid #eee;
       .partner-tip{
          font-size: 0.32rem;
          font-weight:500;
          color: #666;
        }
        .partner-num{
          color: #f53858;
          font-size: 0.42rem;
          font-weight: 800;
          position: relative;
          top: 3px;
          label{
            font-size: 0.32rem;
            font-weight:450;
            position: relative;
            bottom: 2px;
            padding-left: 0.1rem;
          }
        }
      }
      .add{
        display: flex;
        .add-partner{
          flex: 1;
          text-align: center;
          padding: 0.3rem 0;
          border-right: 0.5px solid #EEE;
          .title{
            color: #888;
            font-size: 0.28rem;
          }
          .num{
            margin-top: 0.32rem;
            color: #f96547;
            font-size: 0.4rem;
          }
        }
        .add-income{
          //display: inline-block;
          //width: 49%;
          flex: 1;
          text-align: center;
          padding: 0.3rem 0;
          .title{
            color: #888;
            font-size: 0.28rem;
          }
          .num{
            margin-top: 0.32rem;
            color: #75acf8;
            font-size: 0.4rem;
          }
        }
      }
    }
    .list-banner{
      margin-top: 0.2rem;
      display: flex;
      font-size: 0.32rem;
      background-color: white;
      .banner{
        padding: 0.3rem 0;
        color: #666;
        flex: 1;
        text-align: center;
        font-weight: 500;
        border-bottom: 0.5px solid #eee;
      }
      .banner-hover{
        color: #f53858;
        position: relative;
        .line{
          position: absolute;
          border: 0.5px solid #f53858;
          bottom: 0;
          width: 100%;
        }
      }
    }
    .list{
      background-color: white;
      .items{
        display: flex;
        padding: 0.2rem 0.3rem;
        font-size: 0.3rem;
        border-bottom: 0.5px solid #E8E8E8;
        .item{
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0.05rem 0;
        }
        .item:nth-child(2){
          text-align: right;
        }
      }
      .list-title{
        display: flex;
        border-bottom: 0.5px solid #eee;
        div{
          flex: 1;
          text-align: left;
          padding: 0.2rem 0.3rem;
          color: #888;
        }
        div:nth-child(2){
          text-align: right;
        }
      }
    }
  }
</style>
